<template>
	<scroll-view scroll-y class="scroll-view" @scrolltolower="onScrollToLower">
		<view class="order-list">
			<template v-for="(item, index) in orderList">
				<view class="order-item-card-wrap" :key="item.orderId" @click="toDetail(item)">
					<view class="section_4 flex-col">
						<text class="text_7">{{ item.statusName }}</text>
						<view class="group_2 flex-row">
							<view class="text-group_1 flex-col justify-between">
								<text class="text_8">{{ item.fromTime}}</text>
								<text class="text_9">{{ item.fromNameUyghur }}</text>
							</view>
							<view class="block_2 flex-col">
								<text class="text_10">{{ item.duration }}</text>
								<view class="block_3 flex-col">
								</view>
								<text class="text_11">{{ item.trainCode }}</text>
							</view>
							<view class="block_5 flex-col justify-between">
								<view class="text-wrapper_2 flex-row">
									<text class="text_12">{{ item.toTime }}</text>
									<text class="text_13" v-if="item.durationDays">+{{ item.durationDays}}</text>
								</view>
								<text class="text_14">{{ item.toNameUyghur }}</text>
							</view>
						</view>
						<view class="group_3" v-for="user in item.passengers">
							<text class="text_15">يولوچى</text>
							<text class="text_16">{{user.name }}</text>
							<text class="text_17">{{ user.coachSeatsNo }}</text>
						</view>
						<!-- 0 支付 1 删除 2取消支付 3 取消订单 4 购买返程 5 再次购买-->
						<!-- v-if="item.payStatus === 0 && item.status === 0" -->
						<view class="group_4 flex-row" style="justify-content: flex-end;"
							v-if="item.payStatus === 0 && item.status === 0">
							<view class="button_3 flex-col" @click.stop="handleSubmit(0,item)">{{ '去支付' | i18n }}</view>
							<!-- <button class="button_3 flex-col" @click="handleSubmit(3,item)">取消订单</button> -->
							<view class="button_3 flex-col" @click.stop="handleSubmit(1,item)">{{ '删除订单' | i18n }}</view>
						</view>
						<view class="group_4 flex-row" style="justify-content: flex-end;"
							v-if="item.payStatus ===1 && item.status === 4">
							<view class="button_3 flex-col">{{ '分享' | i18n }}</view>
							<view class="button_3 flex-col" @click.stop="handleSubmit(4,item)">{{ '购买返程' | i18n }}</view>
							<view class="button_3 flex-col" @click.stop="handleSubmit(1,item)">{{ '删除订单' | i18n }}</view>
						</view>
						<view class="group_4 flex-row" style="justify-content: flex-end;"
							v-if="(item.payStatus === 1 && item.status === 5) || (item.payStatus === 1 && item.status === 6)">
							<view class="button_3 flex-col" @click.stop="handleSubmit(4,item)">{{ '购买返程' | i18n }}</view>
							<view class="button_3 flex-col" @click.stop="handleSubmit(1,item)">{{ '删除订单' | i18n }}</view>
						</view>
						<view class="group_4 flex-row" style="justify-content: flex-end;"
							v-if="item.payStatus ===1 && item.status === 7">
							<view class="button_3 flex-col">{{ '分享' | i18n }}</view>
							<view class="button_3 flex-col" @click.stop="handleSubmit(5,item)">{{ '再次购买' | i18n }}</view>
							<view class="button_3 flex-col" @click.stop="handleSubmit(1,item)">{{ '删除订单' | i18n }}</view>
						</view>
						<view class="group_4 flex-row" style="justify-content: flex-end;"
							v-if="item.payStatus ===4 && item.status === 6">
							<view class="button_3 flex-col" @click.stop="handleSubmit(0,item)">{{ '重新支付' | i18n }}</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	</scroll-view>
</template>


<script>
	import dayjs from '@/libs/_dayjs.min'
	const now = dayjs().toObject()
	const P = (num) => num > 9 ? num + '' : `0${num}`
	const nowObject = {
		year: now.years,
		month: P(now.months + 1),
		day: P(now.date)
	}
	import {
		mapGetters
	} from 'vuex'
	import {
		getTrainOrderList,
		submitTrainOrderAgain,
		deleteTrainOrder,
		cancelTrainOrderPay,
		cancelTrainOrder
	} from "../../../api/dailyLife";

	import {
		trainPay
	} from '@/utils/payUtils.js'
	import {
		TRAFFIC_ORDER_TYPE
	} from '../../../consts'
	let pageNumber = 1
	let lock = false
	export default {
		name: "trainOrder",
		computed: mapGetters(['isLogin', 'uid']),
		data() {
			return {
				orderList: [],
				trainTime: nowObject,
			}
		},
		mounted() {
			this.getOrderList(1)
		},
		methods: {
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/dailyLife/train_details/index?orderId=${item.orderId}&orderNo=${item.tradeNo}`
				})
			},
			getOrderList(page, override) {
				const data = {
					userId: this.uid,
					page
				}
				if (!lock) {
					lock = true
				} else {
					return
				}
				if (page === 1) {
					uni.showLoading()
				}
				getTrainOrderList(data).then((res) => {
					const {
						code,
						data,
						msg
					} = res
					if (code === 1) {
						pageNumber = page
						const list = data.map(el => {
							return {
								...el,
								...el.trainSeats[0]
							}
						})
						this.orderList = override ? list : this.orderList.concat(list)
						console.log('this.orderList', this.orderList)
					} else {
						console.error(msg)
					}
				}).finally(() => {
					lock = false
					uni.hideLoading()
				})
			},
			onScrollToLower() {
				this.getOrderList(pageNumber + 1)
			},
			/**
			 *
			 * @param {Object} status
			 *  0 支付订单
			 *  1 删除订单
			 *  2 取消支付
			 *  3 取消订单
			 *  4 购买返程
			 *  5 再次购买
			 */
			async handleSubmit(status, orderDetail) {
				const {
					fromCode,
					fromNameUyghur,
					toCode,
					toNameUyghur,
				} = orderDetail.trainSeats[0]
				const {
					year,
					month,
					day
				} = this.trainTime
				const startDate = `${year}-${month}-${day}`
				switch (status) {
					case 0:
						// 创建充值订单
						const res1 = await submitTrainOrderAgain({
							orderId: orderDetail.orderId,
							orderNo: orderDetail.tradeNo
						})
						const {
							code,
							data,
							msg
						} = res1
						if (code === 1) {
							// 唤醒支付
							trainPay(data.jsConfig, {
								orderId: orderDetail.orderId,
								orderNo: orderDetail.tradeNo
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: msg
							})
						}
						break;
					case 1:
						let _this = this
						uni.showModal({
							title: _this.$i18n['提示'],
							cancelText: _this.$i18n['取消'],
							confirmText: _this.$i18n['确认'],
							content: _this.$i18n['确定要删除这条订单吗？'],
							success: function(res) {
								if (res.confirm) {
									_this.onDeleteOrder()
								}
							}
						});
						break
					case 2:
						uni.showModal({
							title: _this.$i18n['提示'],
							cancelText: _this.$i18n['取消'],
							confirmText: _this.$i18n['确认'],
							content: '确定要取消支付这条订单吗?',
							success: function(res) {
								if (res.confirm) {
									_this.onCancelPay()
								}
							}
						});
						break
					case 3:
						uni.showModal({
							title: _this.$i18n['提示'],
							cancelText: _this.$i18n['取消'],
							confirmText: _this.$i18n['确认'],
							content: '确定要取消这条订单吗?',
							success: function(res) {
								if (res.confirm) {
									_this.onCancelOrder()
								}
							}
						});
						break
						case 4:
						// 返程
						uni.navigateTo({
							url: `/pages/dailyLife/train_ticket/index?to_code=${fromCode}&to_name=${fromNameUyghur}&from_name=${toNameUyghur}&from_code=${toCode}&start_date=${startDate}`
						})
						break
						case 5:
						// 再次购买
						uni.navigateTo({
							url: `/pages/dailyLife/train_ticket/index?from_code=${fromCode}&from_name=${fromNameUyghur}&to_name=${toNameUyghur}&to_code=${toCode}&start_date=${startDate}`
						})
						break
					default:
						break;
				}
			},
			onDeleteOrder() {
				deleteTrainOrder({
					orderId: orderDetail.orderId,
					orderNo: orderDetail.tradeNo
				}).then(res => {
					let {
						code,
						msg
					} = res
					if (code === 1) {
						uni.showToast({
							title: msg
						})
						this.getOrderList(1)
					} else {
						uni.showToast({
							icon: 'none',
							title: msg
						})
					}
				})
			},
			onCancelOrder() {
				cancelTrainOrder({
					orderId: orderDetail.orderId,
					orderNo: orderDetail.tradeNo
				}).then(res => {
					let {
						code,
						msg
					} = res
					if (code === 1) {
						uni.showToast({
							title: msg
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							icon: 'none',
							title: msg
						})
					}
				})
			},
			onCancelPay() {
				cancelTrainOrderPay({
					orderId: orderDetail.orderId,
					orderNo: orderDetail.tradeNo
				}).then(res => {
					let {
						code,
						msg
					} = res
					if (code === 1) {
						uni.showToast({
							title: msg
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							icon: 'none',
							title: msg
						})
					}
				})
			},

		}
	}
</script>

<style>
	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
	}

	.justify-between {
		justify-content: space-between;
	}

	.order-list {
		padding: 32upx 30upx;
	}

	.scroll-view {
		width: 100%;
		height: 100%;
	}

	.order-item-card-wrap {
		margin-bottom: 20upx;
	}

	.order-item-card-wrap:last-child {
		margin-bottom: 0
	}


	.box_1 {
		background-color: rgba(249, 249, 249, 1);
		width: 375px;
		height: 1009px;
	}

	.section_1 {
		width: 375px;
		height: 104px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2861bb22b4cd0fee5501075dff3e79fced1324f9f107240e5531e27f4c36dad9) 100% no-repeat;
		background-size: 100% 100%;
	}

	.block_1 {
		width: 334px;
		height: 13px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng003cc631621b3e4ffc6c09795a8ff64a3fde9209cb6402a08ca0db5e22697413) 100% no-repeat;
		background-size: 100% 100%;
		margin: 17px 0 0 27px;
	}

	.nav-bar_1 {
		width: 375px;
		height: 47px;
		margin: 11px 0 16px 0;
	}

	.icon_1 {
		width: 7px;
		height: 14px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0b95d20d62d2a802a4f07d98928ad348dea9ebfd77055b3dbffaa81f54a1d0ef) -1px -1px no-repeat;
		background-size: 9px 16px;
		margin: 17px 0 0 20px;
	}

	.text_1 {
		width: 72px;
		height: 18px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 18px;
		font-family: PingFangSC-Medium;
		text-align: center;
		white-space: nowrap;
		line-height: 18px;
		margin: 15px 0 0 125px;
	}

	.section_2 {
		width: 87px;
		height: 32px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng5e7214c73a4581c660dde996d1232b0a15a49893b58a976d5150634cdb55cce9) 100% no-repeat;
		background-size: 100% 100%;
		margin: 8px 7px 0 57px;
	}

	.section_3 {
		width: 375px;
		height: 906px;
		margin-bottom: 1px;
	}

	.tabs_1 {
		background-color: rgba(255, 255, 255, 1);
		position: relative;
		width: 375px;
		height: 42px;
	}

	.text-wrapper_1 {
		background-color: rgba(253, 208, 75, 1);
		height: 42px;
		margin-top: -1px;
		width: 75px;
	}

	.text_2 {
		width: 36px;
		height: 12px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 12px;
		font-family: PingFangSC-Medium;
		text-align: center;
		white-space: nowrap;
		line-height: 12px;
		margin: 15px 0 0 20px;
	}

	.text_3 {
		width: 24px;
		height: 12px;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		text-align: right;
		white-space: nowrap;
		line-height: 12px;
		margin: 14px 0 0 25px;
	}

	.text_4 {
		width: 24px;
		height: 12px;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		text-align: center;
		white-space: nowrap;
		line-height: 12px;
		margin: 14px 0 0 52px;
	}

	.text_5 {
		width: 24px;
		height: 12px;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		text-align: center;
		white-space: nowrap;
		line-height: 12px;
		margin: 14px 0 0 51px;
	}

	.text_6 {
		width: 24px;
		height: 12px;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		text-align: center;
		white-space: nowrap;
		line-height: 12px;
		margin: 14px 25px 0 51px;
	}

	.box_2 {
		background-color: rgba(233, 99, 31, 1);
		position: absolute;
		left: 0;
		top: 41px;
		width: 75px;
		height: 2px;
	}

	.section_4 {
		box-shadow: 0px 0px 10px 0px rgba(179, 175, 175, 0.25);
		background-color: rgba(255, 255, 255, 1);
		border-radius: 10px;
		width: 690rpx;
		margin: 0 auto 10px;
		padding: 20rpx;
	}

	.text_7 {
		overflow-wrap: break-word;
		color: rgba(233, 85, 14, 1);
		font-size: 24rpx;
		text-align: left;
		white-space: nowrap;
		line-height: 48rpx;
		text-align: right;
	}

	.group_1 {
		width: 315px;
		height: 1px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng14ec70877fe6acc48ca6667c3ea65348d72d10944d5966d675fe5f5ae94e8ea0) -1px 0px no-repeat;
		background-size: 317px 1px;
		margin: 10px 0 0 15px;
	}

	.group_2 {
		position: relative;
		width: 100%;
		height: 41px;
		display: flex;
		justify-content: flex-end;
	}

	.text-group_1 {
	}

	.text_8 {
		height: 20px;
		overflow-wrap: break-word;
		color: rgba(254, 208, 77, 1);
		font-size: 21px;
		font-family: DINAlternate-Bold;
		text-align: left;
		white-space: nowrap;
		line-height: 22px;
	}

	.text_9 {
		height: 20px;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 12px;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
		margin-top: 1px;
	}

	.block_2 {
		margin-left: 32rpx;
		margin-right: 32rpx;
	}

	.text_10 {
		height: 17px;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		text-align: left;
		white-space: nowrap;
		    line-height: 29px;
		text-align: center;
	}

	.block_3 {
		background-color: rgba(216, 216, 216, 1);
		width: 84rpx;
		height: 1px;
		margin: 5rpx 0;
	}
	
	.block_4 {
		position: absolute;
		right: -5rpx;
		top: 50%;
		transform: translateY(-50%);
		background-color: rgba(255, 255, 255, 1);
		border-radius: 50%;
		width: 10rpx;
		height: 10rpx;
		border: 1px solid rgba(216, 216, 216, 1);
	}
	
	.block_6 {
		position: absolute;
		background-color: rgba(216, 216, 216, 1);
		left: -5rpx;
		top: 50%;
		transform: translateY(-50%);
		background-color: rgba(255, 255, 255, 1);
		border-radius: 50%;
		width: 10rpx;
		height: 10rpx;
		border: 1px solid rgba(216, 216, 216, 1);
	}

	.text_11 {
		height: 17px;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		text-align: left;
		white-space: nowrap;
		    line-height: 29px;
	}

	.text-wrapper_2 {
		height: 20px;
	}

	.text_12 {
		height: 20px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 21px;
		font-family: DINAlternate-Bold;
		text-align: left;
		white-space: nowrap;
		line-height: 22px;
	}

	.text_13 {
		height: 8px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 9px;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
		margin: 2px 0 0 -2px;
	}

	.text_14 {
		height: 20px;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 12px;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
		margin-top: 1px;
	}

	.group_3 {
		background-color: rgba(249, 249, 249, 1);
		border-radius: 2px;
		width: 630rpx;
		margin: 10px 0 0 15px;
		padding: 20rpx 10rpx;
		display: flex;
		align-items: center;
	}

	.text-wrapper_3 {
		width: 600rpx;
		display: flex;
		margin-bottom: 20rpx;
		align-items: center;
	}

	.text_15 {
		height: 14px;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 10px;
		text-align: left;
		white-space: nowrap;
		line-height: 14px;
	}

	.text_16 {
		height: 14px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 14px;
		font-family: PingFangSC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 14px;
		margin-left: 5px;
	}

	.text_17 {
		height: 14px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 14px;
		font-family: PingFangSC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 14px;
		flex-grow: 1;
		padding-left: 20rpx;
	}

	.section_5 {
		width: 315px;
		height: 1px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng14ec70877fe6acc48ca6667c3ea65348d72d10944d5966d675fe5f5ae94e8ea0) -1px 0px no-repeat;
		background-size: 317px 1px;
		margin-top: 9px;
	}

	.group_4 {
		margin: 9px 0 10px;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.button_1 {
		border-radius: 16px;
		height: 24px;
		border: 0.5px solid rgba(205, 205, 205, 1);
		width: 68px;
	}

	.text_18 {
		width: 48px;
		height: 12px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 12px;
		text-align: center;
		white-space: nowrap;
		line-height: 12px;
		margin: 6px 0 0 10px;
	}

	.button_2 {
		border-radius: 16px;
		height: 24px;
		border: 0.5px solid rgba(205, 205, 205, 1);
		margin-left: 10px;
		width: 68px;
	}

	.text_19 {
		width: 24px;
		height: 12px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 12px;
		text-align: center;
		white-space: nowrap;
		line-height: 12px;
		margin: 6px 0 0 22px;
	}

	.button_3 {
		border-radius: 20rpx;
		border: 0.5px solid #cdcdcd;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		min-width: 136rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.text_20 {
		width: 48px;
		height: 12px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 12px;
		text-align: center;
		white-space: nowrap;
		line-height: 12px;
		margin: 6px 0 0 10px;
	}

	.section_6 {
		width: 340px;
		height: 34px;
		margin: 15px 0 0 15px;
	}

	.input_1 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 17px;
		width: 285px;
		height: 34px;
	}

	.icon_2 {
		width: 14px;
		height: 14px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng27f9aa3b29a2b82f7095920dcfbdccb026752e9f52eb0270641becf10ba13985) 100% no-repeat;
		background-size: 100% 100%;
		margin: 10px 0 0 15px;
	}

	.text_21 {
		width: 86px;
		height: 14px;
		overflow-wrap: break-word;
		color: rgba(205, 205, 205, 1);
		font-size: 14px;
		text-align: left;
		white-space: nowrap;
		line-height: 14px;
		margin: 10px 165px 0 5px;
	}

	.image-text_1 {
		width: 39px;
		height: 12px;
		margin-top: 11px;
	}

	.text-group_2 {
		width: 24px;
		height: 12px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 12px;
		text-align: right;
		white-space: nowrap;
		line-height: 12px;
	}

	.icon_3 {
		width: 8px;
		height: 6px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9b6860f20da5a15453fa2955acf1b42805e988100ca870cdb4e2dbc5eab1e98e) 100% no-repeat;
		background-size: 100% 100%;
		margin-top: 2px;
	}

	.list_1 {
		width: 345px;
		height: 545px;
		justify-content: space-between;
		margin: 15px 0 0 16px;
	}

	.list-items_1 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 10px;
		width: 345px;
		height: 175px;
		margin-bottom: 10px;
	}

	.text_22 {
		width: 36px;
		height: 12px;
		overflow-wrap: break-word;
		font-size: 12px;
		text-align: left;
		white-space: nowrap;
		line-height: 12px;
		margin: 15px 0 0 294px;
	}

	.box_3 {
		width: 315px;
		height: 1px;
		background-size: 317px 2px;
		margin: 10px 0 0 15px;
	}

	.box_4 {
		width: 176px;
		height: 16px;
		margin: 15px 0 0 154px;
	}

	.text_23 {
		width: 80px;
		height: 16px;
		overflow-wrap: break-word;
		font-size: 16px;
		font-family: PingFangSC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 16px;
	}

	.box_5 {
		width: 12px;
		height: 3px;
		background-size: 14px 5px;
		margin: 6px 0 0 10px;
	}

	.text_24 {
		width: 64px;
		height: 16px;
		overflow-wrap: break-word;
		font-size: 16px;
		font-family: PingFangSC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 16px;
		margin-left: 10px;
	}

	.text-wrapper_4 {
		width: 253px;
		height: 12px;
		margin: 10px 0 0 77px;
	}

	.text_25 {
		width: 148px;
		height: 12px;
		overflow-wrap: break-word;
		font-size: 12px;
		text-align: left;
		white-space: nowrap;
		line-height: 12px;
	}

	.text_26 {
		width: 90px;
		height: 11px;
		overflow-wrap: break-word;
		font-size: 11px;
		text-align: left;
		white-space: nowrap;
		line-height: 11px;
		margin-top: 1px;
	}

	.text-wrapper_5 {
		width: 56px;
		height: 20px;
		overflow-wrap: break-word;
		font-size: 0;
		font-family: PingFangSC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
		margin: 10px 0 0 274px;
	}

	.text_27 {
		width: 56px;
		height: 20px;
		overflow-wrap: break-word;
		font-size: 12px;
		font-family: PingFangSC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.text_28 {
		width: 56px;
		height: 20px;
		overflow-wrap: break-word;
		font-size: 18px;
		font-family: PingFangSC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.box_6 {
		width: 315px;
		height: 1px;
		background-size: 317px 2px;
		margin: 10px 0 0 15px;
	}

	.button_4 {
		border-radius: 16px;
		height: 24px;
		border: 0.5px solid rgba(205, 205, 205, 1);
		width: 68px;
		margin: 9px 0 10px 262px;
	}

	.text_29 {
		width: 48px;
		height: 12px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 12px;
		text-align: center;
		white-space: nowrap;
		line-height: 12px;
		margin: 6px 0 0 10px;
	}

	.box_7 {
		width: 224px;
		height: 24px;
		margin: 9px 0 10px 105px;
	}

	.button_5 {
		border-radius: 16px;
		height: 24px;
		border: 0.5px solid rgba(205, 205, 205, 1);
		width: 68px;
	}

	.text_30 {
		width: 48px;
		height: 12px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 12px;
		text-align: center;
		white-space: nowrap;
		line-height: 12px;
		margin: 6px 0 0 11px;
	}

	.button_6 {
		border-radius: 16px;
		height: 24px;
		border: 0.5px solid rgba(205, 205, 205, 1);
		margin-left: 10px;
		width: 68px;
	}

	.text_31 {
		width: 48px;
		height: 12px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 12px;
		text-align: center;
		white-space: nowrap;
		line-height: 12px;
		margin: 6px 0 0 11px;
	}

	.button_7 {
		border-radius: 16px;
		height: 24px;
		border: 0.5px solid rgba(205, 205, 205, 1);
		margin-left: 10px;
		width: 68px;
	}

	.text_32 {
		width: 48px;
		height: 12px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 12px;
		text-align: center;
		white-space: nowrap;
		line-height: 12px;
		margin: 6px 0 0 11px;
	}

	.home-indicator_1 {
		width: 134px;
		height: 5px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngbc282b60f753ac02e44904ce6276161204a43859f07a35cb7aac43711d9e7e57) 100% no-repeat;
		background-size: 100% 100%;
		margin: 48px 0 11px 121px;
	}
</style>
